<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_2_固定定位广告条</title>

    <style>
        
        .top{
            height: 120px;
            background-color: #5AA4AC;
            color: #fff;
            font-size: 30px;
            /* 使用固定定位 */
            position: fixed;
            top: 0;
            /* 设置宽度为视口(view port) 宽度的100% */
            width: 100vw;
        }
        .main{
            /* 让内容向下一点 不然会遮住部分文字 */
            margin-top: 130px;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }

    </style>

</head>
<body>

<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto atque consequatur deleniti facere,
        hic inventore ipsam laborum magni maiores mollitia nobis obcaecati odit provident qui sint, sit velit
        voluptatibus.
    </div>
    <div>Architecto assumenda consequuntur cumque dicta ea enim error explicabo facilis id illo, iste itaque maiores
        maxime necessitatibus nesciunt odio officia possimus quasi quidem quos repellat sequi totam vel veritatis
        voluptas.
    </div>
    <div>Aliquam dicta distinctio enim eum ex, excepturi facilis fugiat in, laudantium neque nihil quam quas quasi qui
        quisquam recusandae saepe similique tenetur vel velit. Incidunt modi nam necessitatibus neque officia?
    </div>
    <div>At consectetur, cum cumque cupiditate doloremque facere illo labore libero maxime mollitia, nostrum quaerat
        quas tenetur ullam ut voluptate voluptates. Aliquid aspernatur beatae fuga in maiores quasi, similique sint
        totam!
    </div>
    <div>Asperiores, beatae consectetur corporis doloremque doloribus ea fuga impedit incidunt iure, molestias nam
        necessitatibus nobis officia optio tempore totam unde? Accusamus amet cumque debitis error harum iste molestias
        ratione voluptate?
    </div>
    <div>Ducimus odit officia sequi? Eaque explicabo ipsum itaque perferendis sint totam, ut. Accusantium alias aperiam
        asperiores consequuntur delectus dignissimos, enim exercitationem in, inventore itaque minima nisi officia
        quidem, reprehenderit voluptatem?
    </div>
    <div>Consequatur dolorem esse expedita neque nulla recusandae sit, tempore. Ad at dolores iste maxime nam non porro
        quam sequi suscipit ut. Amet aperiam asperiores impedit porro quibusdam quis repellendus sit!
    </div>
    <div>Aliquam aliquid architecto blanditiis consequuntur cumque deleniti dignissimos doloribus facilis fugiat in
        inventore libero minima minus, necessitatibus officia perspiciatis possimus quae quisquam quod repellat rerum
        soluta suscipit ut veritatis voluptas!
    </div>
    <div>Adipisci cum distinctio nemo, nesciunt non quidem tenetur? Assumenda cupiditate doloremque earum libero omnis
        veritatis. Aspernatur corporis delectus deleniti, dolor dolorem eligendi eveniet exercitationem fugiat in minus
        molestiae possimus tenetur.
    </div>
    <div>At commodi consequatur consequuntur, cum deserunt ea, eos ipsa ipsum laboriosam maxime minus mollitia natus
        nisi officia praesentium quasi quisquam quo quod reiciendis repellendus sapiente tempora ut voluptas. Delectus,
        ducimus.
    </div>
    <div>Alias amet aperiam atque commodi distinctio, dolore dolores dolorum ducimus earum eligendi est illo inventore
        ipsa maiores minus natus neque nesciunt obcaecati omnis optio qui sequi sunt, ut voluptatibus voluptatum!
    </div>
    <div>Excepturi odio perspiciatis tempore? Alias dolorum iste itaque nihil rem voluptatem? Ab aliquid amet animi
        magnam unde voluptate voluptatum. Commodi consectetur dolores ducimus illo illum natus numquam possimus
        reprehenderit tempora.
    </div>
    <div>Architecto inventore molestias tempore? Accusamus aliquam aperiam commodi dolorum eaque, eos ex excepturi
        laboriosam laudantium minus modi nemo sint sit soluta tempora voluptatem voluptates. Ab eos maxime quaerat
        reiciendis sit.
    </div>
    <div>Atque aut debitis, deleniti dolorum explicabo laboriosam nobis nostrum omnis perferendis praesentium qui quo,
        reiciendis saepe sunt tempora veniam vitae voluptas. Assumenda, delectus eaque exercitationem iusto quae quia
        rem sit?
    </div>
    <div>Aliquid architecto autem, dignissimos enim eos fugiat harum illum incidunt ipsam iure natus necessitatibus
        nisi, odit officia perferendis quia quos repudiandae temporibus unde veniam? Dolorem incidunt reiciendis
        voluptatibus? Autem, veritatis?
    </div>
    <div>Adipisci aliquid amet, architecto at aut cumque cupiditate debitis doloremque ducimus, ea excepturi expedita
        hic inventore magni maxime minima nobis, quidem quisquam quos sapiente similique soluta tenetur unde veniam
        voluptatibus.
    </div>
    <div>Aliquid blanditiis cum delectus dolore ducimus enim eveniet facere ipsa iusto magni neque non porro provident
        quis, quo quos rem repellendus sunt veniam, vitae! Eos magnam minus qui recusandae ullam!
    </div>
    <div>Assumenda dolor ex inventore minima necessitatibus reprehenderit, voluptatem. Ad aspernatur corporis cum cumque
        debitis dolorem, doloribus facere itaque neque nobis obcaecati pariatur quae quam quasi, quis reiciendis
        repellat temporibus ut!
    </div>
    <div>Aliquam animi consequatur eius eligendi et ex illum, inventore, ipsa ipsam iure molestiae nam odit officiis
        pariatur quisquam quo repellendus saepe sint, soluta suscipit tenetur vitae voluptate! Dolore, et rem.
    </div>
    <div>Beatae dicta, eius eos est, expedita facilis in ipsum iste itaque magnam molestiae molestias quae unde. Animi
        asperiores aspernatur doloribus expedita, impedit inventore minus odit quae qui saepe vero voluptas.
    </div>
    <div>Aperiam autem commodi consequuntur eligendi ex excepturi expedita facilis illum iste itaque iusto libero nihil
        nisi, nulla, quidem recusandae saepe sequi sit ullam ut velit veniam veritatis voluptas voluptate voluptates.
    </div>
    <div>Aperiam in laudantium magnam nemo nulla vel veniam, voluptates! Accusamus accusantium cum dignissimos
        distinctio, dolores earum eius eligendi esse iste magnam nam officiis perferendis quidem quis vel veritatis vero
        voluptatibus.
    </div>
    <div>Consectetur corporis dolores esse fugit. Beatae earum expedita harum, ipsa minima mollitia natus non quisquam
        sed sequi sit, ullam velit voluptate? Aut enim ex nam quis ratione sequi unde voluptas?
    </div>
    <div>Ab, aliquid dolores ducimus eaque eius expedita facilis illum, mollitia, necessitatibus nesciunt nihil optio
        perferendis placeat quidem rerum sit voluptas! Aspernatur blanditiis culpa facilis nesciunt perferendis,
        perspiciatis quisquam. Dolores, nam.
    </div>
    <div>Aperiam architecto assumenda beatae cumque dolore dolorem doloremque ipsa ipsam labore magnam maiores neque
        nisi numquam pariatur quis quo quos repellendus reprehenderit repudiandae, sint, sit sunt tempora unde vero
        voluptatem?
    </div>
    <div>Accusantium, asperiores deleniti nam quidem similique soluta. At autem commodi consectetur, cumque debitis
        deserunt dolorem earum eum id minima molestiae mollitia pariatur perferendis porro quasi quidem ratione,
        recusandae velit, voluptates?
    </div>
    <div>Ab ad animi aperiam asperiores aspernatur delectus doloribus ea eligendi error est fuga fugiat molestias odit,
        praesentium quam, quisquam quo ratione recusandae rerum saepe soluta sunt totam unde veniam vitae.
    </div>
    <div>Alias assumenda blanditiis deserunt dolor, doloremque eaque, laborum maiores maxime, modi necessitatibus nisi
        quo vitae voluptatem! Accusantium consectetur consequatur consequuntur dolores ex facilis iusto laborum nam,
        placeat reiciendis rerum sequi!
    </div>
    <div>Ad assumenda aut cumque cupiditate dicta dolor dolorum enim et fugiat harum impedit modi molestias natus nihil
        perspiciatis quam, quia quidem quis quod ratione rem repellendus reprehenderit soluta ullam vitae.
    </div>
    <div>Consectetur corporis dicta eos, fugiat fugit illum, ipsa ipsum, iste magnam mollitia officia quam quas sequi
        vel vitae. Ab esse itaque nam nesciunt non sed sit? Deleniti dolorum ratione temporibus?
    </div>
</div>

</body>
</html>